import React, { useEffect, useState } from 'react'
import { Button, Card, Descriptions, Image } from 'antd'
import { useNavigate, useParams } from 'react-router-dom'
import { getHospitalDetail } from '@/api/hospital/hospitalList';
import { IHospitalDetailResponse } from '@/api/hospital/model/hospitalListTypes';
export default function HospitalDetail() {
    const navigate = useNavigate()
    let { id } = useParams();
    let [hospitalDetail, setHospitalDetail] = useState<IHospitalDetailResponse>()
    async function _getHospitalDetail() {
        let data = await getHospitalDetail(id as string);
        console.log(data);
        setHospitalDetail(data);
    }
    useEffect(() => {
        id && _getHospitalDetail();
    }, [])
    return (
        <Card>
            <Descriptions labelStyle={{ width: 200 }} title="基本信息" bordered>
                <Descriptions.Item label="医院名称" span={1.5}>{hospitalDetail?.hospital.hosname}</Descriptions.Item>
                <Descriptions.Item label="医院logo" span={1.5}>
                    {hospitalDetail?.hospital.logoData && <Image width={120} src={'data:image/png;base64,' + hospitalDetail?.hospital.logoData} />}
                </Descriptions.Item>
                <Descriptions.Item label="医院编码" span={1.5}>{hospitalDetail?.hospital.hoscode}</Descriptions.Item>
                <Descriptions.Item label="医院地址" span={1.5}>{hospitalDetail?.hospital.param.fullAddress}</Descriptions.Item>
                <Descriptions.Item label="坐车路线" span={3}>
                    {hospitalDetail?.hospital.route}
                </Descriptions.Item>
                <Descriptions.Item label="医院简介" span={3}>
                    {hospitalDetail?.hospital.intro}
                </Descriptions.Item>
            </Descriptions>

            <Descriptions className="mt" title="预约规则信息" bordered>
                <Descriptions.Item label="预约周期" span={1.5}>{hospitalDetail?.bookingRule.cycle}</Descriptions.Item>
                <Descriptions.Item label="放号时间" span={1.5}>{hospitalDetail?.bookingRule.releaseTime}</Descriptions.Item>
                <Descriptions.Item label="停挂时间" span={1.5}>{hospitalDetail?.bookingRule.quitTime}</Descriptions.Item>
                <Descriptions.Item label="退号时间" span={1.5}>{hospitalDetail?.bookingRule.quitDay}</Descriptions.Item>
                <Descriptions.Item label="预约规则" span={3}>
                    <ul>
                        {hospitalDetail?.bookingRule.rule.map((item,index) => (
                            <li key={index}>{item}</li>
                        ))}
                    </ul>

                </Descriptions.Item>
            </Descriptions>
            <Button className="mt" onClick={()=>navigate(-1)}>返回</Button>
        </Card>
    )
}
